<template>
    <a-layout class='videoReal videodarkdom'>
        <a-layout-sider class="real_time_monitor_sider" width="300" style="height: 100%">
            <leftTree :outEqCodeList='state.outEqCodeList' :playList='state.playList' @changChannle='changChannle'>
            </leftTree>

        </a-layout-sider>
        <div class="content_container">
            <div class="real_time_monitor_content car_info_content" style="padding-left: 10px">
                <lty-card id="real_time_player" title="实时视频"
                    style="flex:2; height: 100%; background-color: transparent; margin-right: 10px;overflow: hidden;box-sizing: border-box;">
                    <div class="card_header_bar">
                        <a-button class="full_screen" type='text'
                            @click="toggleFullScreen('tstrtvs_page', (status) => state.fullStatus = status)">
                            <template #icon>
                                <fullscreen-exit-outlined style="color: rgba(221,221,221,0.9);"
                                    v-if="state.fullStatus" />
                                <fullscreen-outlined style="color: rgba(221,221,221,0.9);" v-else />
                            </template>
                        </a-button>

                    </div>

                    <video-play @ipCallOne='ipCallOne' @closeVideo='closeVideo' :playList='state.playList'></video-play>


                </lty-card>

            </div>
            <div class="car_info_content">
                <lty-card title="电子地图" style=" background-color: transparent; overflow: hidden;box-sizing: border-box;">
                    <div class="card_header_bar">
                        <a-button style="transform: translate(3px, -4px);" v-if="isModal" type='text'
                            @click="emit('modalClose')">
                            <template #icon>
                                <CloseCircleOutlined style="font-size: 26px;color: rgba(221,221,221,0.9);" />
                            </template>
                        </a-button>
                    </div>
                </lty-card>

            </div>
        </div>

        <div class="right_content">
            <div class="car_info_content">
                <lty-card title="电子地图" style=" background-color: transparent; overflow: hidden;box-sizing: border-box;">
                </lty-card>

            </div>
            <div class="car_info_content">

                <lty-card title="车辆信息" style="background-color: transparent; overflow: hidden;box-sizing: border-box;">
                </lty-card>
            </div>
        </div>

        <IpCall ref="IpCallRef"></IpCall>
    </a-layout>

</template>

<script setup>
import { watch, reactive, ref, nextTick, onActivated, defineOptions, defineEmits, defineProps, onMounted } from "vue";
import { FullscreenExitOutlined, FullscreenOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';

import { toggleFullScreen } from '@/utils'
// import NewLineTree from "./components/NewLineTree";
import LeftTree from './components/LeftTree';
import LtyCard from "./components/LTYCard";
import VideoPlay from "./components/VideoPlay";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
const route = useRoute()
import _ from "lodash";
// import VideoRefreshModal from '@/components/VideoRefreshModal/index.vue'
// import {getPermissionState} from "@/permission/index.js";
defineOptions({
    name: 'videoReal'
});
const emit = defineEmits(["modalClose"]);
const props = defineProps({
    propsCodeList: {
        default: () => [],
        type: Array
    },
    isModal: {
        default: () => true,
        type: Boolean
    },

})
const state = reactive({
    fullStatus: false, // 全屏状态
    showPlayer: false, // 是否展示视频模块
    showMap: true, // 是否展示电子地图

    playList: [],  //视屏播放的列表  为了拓展 里面是对象
    outEqCodeList: [],  //外部传递过来的参数
});

const LineTreeRef = ref();
const IpCallRef = ref();
const ipCallOne = (obj) => {
    // console.log(obj,'IpCallRef.value');
    IpCallRef.value.showModal(obj)
}
onMounted(() => {
    // let $query=route.query;
    // if($query.eqCode){
    // 	state.outEqCodeList = $query.eqCode.split(',')
    // }
    // console.log(state.outEqCodeList,'state.outEqCodeList--onMounted');
})
onActivated(() => {
    // 调用时机为首次挂载
    // 以及每次从缓存中被重新插入时
    let $query = route.query;
    if ($query.eqCode) {
        state.outEqCodeList = $query.eqCode.split(',')
    }
    // console.log(state.outEqCodeList,'state.outEqCodeList--onActivated');
})
const clearoutEqCodeList = (obj) => {
    // route.query={}
    state.outEqCodeList = []
}
// 左侧tree增加视频数量
const changChannle = (obj) => {
    clearoutEqCodeList()
    let $index = null, flag = false;
    // 找下看没有空对象
    state.playList.map((item, index) => {
        if (!item.eqCode && !flag) {
            $index = index;
            flag = true;
        }
    });

    if ($index == null) {
        if (state.playList.length < 16) {
            state.playList.push(obj)
        } else {
            message.warning('最多选择16个通道')
        }
    } else {
        state.playList[$index] = obj;
    }
    if (state.playList.length > 16) state.playList.length = 16
    // timecloseVideo()
}
// 右侧关闭视屏
const closeVideo = (obj) => {
    clearoutEqCodeList()

    // console.log('closeVideo',obj);
    // 全部关闭
    if (obj.type == 'allClose') {
        state.playList = [];
    } else if (obj.type == 'screensChange') {
        // 用户手动切换视屏个数 关闭多余数量
        if (state.playList.length > obj.data.screenNum) {
            state.playList.length = obj.data.screenNum;
        }


    } else {
        // 单个关闭
        // 摄像头obj
        state.playList = state.playList.map(item => {
            if (item.eqCode == obj.data.eqCode) {
                return {}
            }
            return item
        })
    }
    // timecloseVideo()
}



watch(() => props.propsCodeList, value => {
    state.outEqCodeList = value;
}, { immediate: true });
const updateActiveKey = (type, vehicleNo) => {
    LineTreeRef.value && LineTreeRef.value.updateActiveKey({ type, vehicleNo })
}






</script>

<style scoped lang="less">
.videoReal {
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    overflow: hidden;
    position: relative;
    // padding: 16px;
    margin: 16px;
    background-color: transparent;

}

.full_screen {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid rgba(221, 221, 221, 0.9);
}

:deep(.real_time_monitor_sider) {
    background-color: transparent !important;
    padding-right: 24px;

    .micro-video-layout-sider-children {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        align-content: stretch;
        flex-wrap: wrap;
    }
}

.content_container {
    width: calc(100% - 300px - 20px - 340px);
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.real_time_monitor_content {

    height: 100%;
    display: flex;
    background: rgba(0, 4, 69, 0.4);
    border-radius: 8px;
    border: 1px solid;

    border-image: linear-gradient(90deg, rgba(0, 130, 242, 0), #53e6ff, rgba(0, 130, 242, 0)) 1 1;

    .lty_card {
        &:last-of-type {
            margin-right: 0;
        }
    }
}

.right_content {
    width: 320px;
    height: 100%;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.car_info_content {
    flex: 1;
    background: rgba(45, 91, 91, 0.7);
    // background: rgba(0, 4, 69, 0.4);
    border-radius: 8px;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(0, 130, 242, 0), #53e6ff, rgba(0, 130, 242, 0)) 1 1;

    .lty_card {
        &:last-of-type {
            margin-right: 0;
        }
    }
}
</style>
